<template>
  <div>
    <van-list class="pj-card">
      <div class="pj-list">
        <div class="pj-list-1">
          <img src="@/assets/1.jpg" alt="">
          <div class="pj-list-2">
            <div class="pj-list-2-name">
              <span>用户名</span>
              <!-- 评分 -->
              <van-rate readonly :size="15" color="#ffd21e" void-icon="star" void-color="#eee" />
            </div>
            <van-tag plain>服务态度好</van-tag>
          </div>
        </div>
        <div class="pj-list-txt">师傅干活儿超厉害...师傅干活儿超厉害...</div>
        <div class="pj-list-img">
          <img v-for="i in 3" src="@/assets/2.jpg" alt="">
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.pj-card {
  padding: 10px 20px;

  .pj-list {
    margin-top: 10px;
    padding-left: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 2px 2px 2px #b0b0b0;
    .pj-list-1 {
      display: flex;
      padding-top: 10px;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
      }

      .pj-list-2 {
        margin-left: 15px;

        >.pj-list-2-name {
          margin: 0 10px 0px 0;

          span {
            margin-right: 10px;
          }
        }
      }
    }

    .pj-list-txt {
      margin-top: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .pj-list-img {
      display: flex;
      align-items: center;
      height: 80px;

      img {
        height: 60px;
        width: 60px;
        border-radius: 4px;
        margin-right: 6px;
        object-fit: cover;
      }
    }
  }
}
</style>